<template>
  <div class="operatorsAuth">
    <van-nav-bar
        :title="$t('operator_cert')"
        left-arrow
        @click-left="$router.push($route.query.backName)"
    />
    <!--     身份信息-->
    <div style="padding: 10px">
      <div class="tips">{{ $t('hine_select_operator') }}</div>
      <div class="content_list">
        <!--      viettel-->
        <div class="content_item" v-for="item in operatorList" :key="item.operatorName" @click="operatorClick(item)">
          <div>
            <img class="image" src="../../assets/icon_provider_one.png">
            <span class="text">{{ item.operatorName }}</span>
          </div>
          <div class="select_right">
            <van-icon name="arrow" color="#9D9D9D"/>
          </div>
        </div>
      </div>
    </div>
    <van-dialog v-model:show="tipsShow" show-cancel-button @confirm="dialogConfirm">
      <template #title>
        <div class="tips_tile">{{ $t('operators_title') }}</div>
      </template>
      <template #default>
        <div class="tips_content" v-html="$t('hint_checked_operators',{ productName:  productName})"></div>
      </template>
    </van-dialog>
    <!--    <div class="confirm">-->
    <!--      <button @click="confirm()">{{ $t('finish') }}</button>-->
    <!--    </div>-->
  </div>
</template>

<script>
import {ref, toRefs, reactive} from 'vue'
import {useI18n} from 'vue-i18n'
import {Dialog, Toast} from 'vant'
import {useRoute} from 'vue-router'
import {operatorSelect , jumpOperatorAuth} from '@/api/home'
import {processNext} from "@/utils/tool";
import {useStore} from "vuex";

export default {
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
  setup() {
    const {tm} = useI18n()
    let operatorList = ref([])
    const store = useStore()
    const routes = useRoute()
    const tipsShow = ref(false)
    const productName = localStorage.getItem('productName')
    const rows = ref({})
    const getOperatorSelect = async () => {
      const res = await operatorSelect()
      if (res.code === 1) {
        operatorList.value = res.data
      }
      // 清除loading
      store.dispatch('changeLoading', false)
    }
    const operatorClick = (row) => {
      rows.value = {...row}
      tipsShow.value = true
    }
    const dialogConfirm = () => {
      if (rows.value.status === 1) {
        const {url, callBack} = rows.value
        // 添加当前地址回调
        let h5CallBack = callBack + '&callBack=' + encodeURIComponent(window.location.origin + '/bankCardInfo')
        h5CallBack = encodeURIComponent(h5CallBack)
        // 运营商跳转地址
        const hrefUrl = url + '&callBack=' + h5CallBack
        window.location.href = hrefUrl
      } else {
        Dialog.confirm({
          title: tm('tip'),
          message: tm('error_operators'),
        }).then(async () => {
          const res = await jumpOperatorAuth()
          if (res.code === 1) {
            processNext('operatorsInfo',routes.query.backName)
          }
        }).catch(() => {
        })

      }
      // window.open(hrefUrl)
    }
    // const confirm = async () => {
    //   const res = await isOperatorAuthSuccess({userId: localStorage.getItem('userId')})
    //   if (res.code === 1) {
    //     processNext('operatorsInfo')
    //   }
    // }
    getOperatorSelect()
    return {
      operatorList,
      operatorClick,
      tipsShow,
      productName,
      rows,
      dialogConfirm
    }
  },
}
</script>

<style scoped lang="less">
.operatorsAuth {
  background-color: #f2f3f5;
  overflow: auto;

  ::v-deep .van-nav-bar {
    background: linear-gradient(90deg, #FF5252, #FF8244) !important;
    z-index: 1999;
  }

  ::v-deep .van-nav-bar .van-icon {
    color: #333333 !important;
  }

  .tips {
    text-align: center;
    font-size: 13px;
    color: #FF5252;
    margin-bottom: 10px;
  }

  .content_list {
    .content_item {
      height: 40px;
      border-bottom: solid 1px #f2f3f5;
      background-color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;

      div {
        height: 100%;
        display: flex;
        align-items: center;

        .image {
          height: 25px;
          width: 25px;
          margin-right: 10px;
        }

        .text {
          font-size: 14px;
          font-weight: 600;
        }
      }

      .select_right {
        color: #9D9D9D;
        font-size: 14px;
        margin-right: 5px;
      }

      .input {
        width: 100px;
        border: none;
        height: 25px;
        font-size: 14px;
        text-align: right;
      }
    }
  }

  .tips_tile {
    color: #FF5252;
    font-size: 16px;
  }

  .tips_content {
    box-sizing: border-box;
    padding: 15px;
    font-size: 14px;
    font-weight: 600;
  }

}
</style>
